<template>
    <el-button type="primary" @click="addCustom">添加属性</el-button>
    <el-table :data="custom" style="margin-top:10px; width: 720px">
        <el-table-column prop="key" label="属性名称" width="180">
            <template #default="scope">
                <el-input v-model="scope.row.key"></el-input>
            </template>

        </el-table-column>
        <el-table-column prop="value" label="属性值" width="360">
            <template #default="scope">
                <el-input v-model="scope.row.value"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="180">
            <template #default="scope">
                <el-button type="error" @click="removeCustom(scope.$index)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>

import { ref, inject, watch } from 'vue';

const custom: any = inject('custom');

const addCustom = () => {

    custom.value.push({
        key: '',
        value: ''
    })
}

const removeCustom = (index: number) => {

    custom.value.splice(index, 1)
    // info.custom.splice(index, 1)
}




</script>